<template>
  <div>
    <div class="topbox">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="(item, index) in CarouselMap" :key="index">
          <img :src="item.carouselmap" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="bttbox">
      <div style="margin-bottom: 15px">
        <p class="tit">首页</p>
      </div>

      <div>
        <el-card
          class="box-card"
          @click.native="goshop(item.id)"
          v-for="(item, index) in CollectionInfo"
          :key="index"
        >
          <div slot="header" class="clearfix">
            <img
              :src="item.imgsrc"
              class="cangping"
              style="width: 230px; height: 230px"
            />
            <div class="vv">
              <p>数量:{{ item.count }}</p>
            </div>
          </div>
          <div style="float: left; color: rgba(0, 0, 0, 0.4)">
            <div>藏品名称</div>
            <div>藏品价格</div>
          </div>
          <div style="float: right">
            <div style="color: rgba(0, 0, 0, 0.7)">{{ item.name }}</div>
            <div style="color: #f4a33a">￥{{ item.sell }}</div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import CoolectionAntiqueApi from "@/api/collection/CoolectionAntiqueApi";
import AnnouncementApi from '@/api/Announcement/AnnouncementApi'
export default {
  name: "Index",
  data() {
    return {
      from: {
        title: "",
        content: "",
      },
      CarouselMap: [],
      CollectionInfo: [
        {
          imgsrc: "/User-Img/906bf0e0-1c97-4066-ae2c-9f80c85af176.jpg",
          count: 250,
          name: "猪猪",
          sell: 99,
          id: 1,
        },
      ],
    };
  },
  created() {
    this.listCollectionStatus1();
    // console.log(this.$store)
    
    this.queryCarouselmapList();
    var a= sessionStorage.getItem("userId");
    if(a == null){
      this.queryAnnouncementList();
    }
  },
  methods: {
    listCollectionStatus1() {
      // 查询全部在售藏品
      CoolectionAntiqueApi.listCollectionStatus1().then((res) => {
        console.log(res.data.data);
        this.CollectionInfo = res.data.data;
      });
    },
    goshop(id) {
      // 点击购买藏品
      console.log(id);
      // 将id存到vux中和浏览器中
      this.$store.commit("GoShop/setId", id);
      sessionStorage.setItem("CLID", id);
      // 跳转藏品详情页
      this.$router.push({ path: "/frontHome/CoolectionInfo" });
    },
    queryAnnouncementList(){
        AnnouncementApi.queryAnnouncementList().then(res => {
            console.log(res.data.data)
            this.from=res.data.data
            this.open(res.data.data.content, res.data.data.title)
        })
    },
    queryCarouselmapList(){
        AnnouncementApi.queryCarouselmapList().then(res => {
            console.log(res.data.data)

            this.CarouselMap=res.data.data
        })
    },

     open(title, content) {
        this.$alert(title,content,{
          confirmButtonText: '确定',
          callback: action => {
            this.$message.success("亲亲~欢迎使用猪猪数藏~~")
          }
        });
      }
  },
};
</script>

<style scoped>
img {
  width: 780px;
  height: 200px;
}
.topbox {
  width: 1560px;
  margin: 0 auto;
  height: 200px;
  position: relative;
}
.bttbox {
  width: 1560px;
  height: 100%;
  /* background: pink; */
  margin: 36px auto;
  position: relative;
}

.bttbox > div > p {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: rgb(230, 31, 26);
}
.tit::before {
  content: "";
  width: 77px;
  height: 7px;
  display: inline-block;
  vertical-align: middle;
  background: url(//static.theone.art/pc/images/pic_home_zuo%402x.png) no-repeat;
  background-size: 100% auto;
  margin: -4px 16px 0 0;
}

.tit::after {
  content: "";
  width: 77px;
  height: 7px;
  display: inline-block;
  vertical-align: middle;
  background: url(//static.theone.art/pc/images/pic-home/pic_home_you%402x.png)
    no-repeat;
  background-size: 100% auto;
  margin: -4px 0 0 16px;
}

.el-card {
  float: left;
  margin-left: 72px;
  margin-bottom: 15px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.vv {
  height: 20px;
  float: left;
  position: absolute;
  background: linear-gradient(154deg, #282828, #484848);
  color: #e7aa71;
  border-radius: 10%;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 300px;
  height: 350px;
}
.cangping {
  position: relative;
  left: 18px;
}
</style>
